<template>
	<!-- 保养执行 -->
	<cardTemplate :loading="loading" :opt="cardSetting" title="保养执行" :setTime="filter" @filterFun="getFilterFun"
		name="workStatus" :safeAreaBottom="safeAreaBottom">
		<defaultBlock v-if="filter.type == 1 && implementOpt.count == 0"></defaultBlock>

		<view class="card-content" v-else>
			<view class="chart-block" v-if="filter.type == 1">
				<l-echart class="ring" ref="implementOpt"></l-echart>
			</view>
			<view class="chart-total" v-if="filter.type == 1">
				<view class="chart-total-count">
					保养任务总计:
					<text>{{ implementOpt.count }}单</text>
				</view>
				<view class="chart-total-detail">
					<view @click="toMaintenanceList({ key: 'planStatus', value: [1, 2, 3, 4, 5] })"
						v-if="memberList.length > 0 || userList.length > 1">
						详情
						<image src="@/static/images/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="title-d" v-if="filter.type == 1 && implementOpt.count > 0">
			保养执行明细
			<view class="key-setting" v-if="userList.length > 1" @click="showKeysSelect('implementOpt')">
				<uni-icons type="gear" style="margin-right: 4rpx;"></uni-icons>
				指标设置
			</view>
		</view>
		<!-- <view class="tag-block" v-if="filter.type == 2 && userList.length > 1 && implementOpt.lineType">
			<view @click="changeLineTag(index)" :class="['tag-block-item', implementOpt.tagIdx === index ? 'act' : '']" v-for="(item, index) in implementOpt.tags" :key="item.key">
				{{ item.name }}
			</view>
		</view> -->
		<view class="data-type-setting">
			<view class="data-type-line" v-if="filter.type == 2 && userList.length && userList.length > 1"></view>
			<view class="data-types">
				<sTabs v-if="filter.type == 1 && memberList.length > 1 && implementOpt.count > 0"
					@change="changeTab('implementOpt', $event)" :list="typeList" :idx="implementOpt.typeIdx"></sTabs>

				<sTabs v-if="filter.type == 2 && userList.length > 1" @change="changeLineType('implementOpt', $event)"
					:list="groupList" :idx="implementOpt.lineType" class="data-type-tabs"></sTabs>

				<view class="data-types-right" v-if="filter.type == 2">
					<view class="mbs-type" v-if="implementOpt.lineType && userList.length > 1"
						@click="changeMbs('implementOpt')">
						<image src="@/static/images/chart.png" mode=""></image>
						对比名单
					</view>
					<view class="date-type" @click="showSPicker('implementOpt')">
						{{ dateTypes[implementOpt.dateType] }}
						<image src="@/static/images/down.png" mode=""></image>
					</view>
				</view>
			</view>

		</view>
		<view class="tag-block" v-if="filter.type == 2 && userList.length > 1 && implementOpt.lineType">
			<view @click="changeLineTag(index)" :class="['tag-block-item', implementOpt.tagIdx === index ? 'act' : '']"
				v-for="(item, index) in implementOpt.tags" :key="item.key">
				{{ item.name }}
			</view>
		</view>
		<view v-if="filter.type == 1 && implementOpt.count > 0">
			<s-table :headers="implementOpt.userHead" :dataList="implementOpt.userRecords" :totals="implementOpt.totals"
				v-if="filter.type == 1 && userList.length == 1"
				@toContractDetail="toMemberDetail($event, 'planStatus')"></s-table>

			<s-table @toContractDetail="toContractDetail($event, implementOpt.typeIdx)" :title="title"
				:totals="implementOpt.totals"
				:dataList="implementOpt.typeIdx == 0 ? implementOpt.groupRecords : implementOpt.userRecords"
				:headers="implementOpt.leaderHead"
				v-if="filter.type == 1 && userList.length && userList.length > 1"></s-table>
		</view>

		<view class="line-chart" v-if="filter.type == 2">
			<defaultBlock v-if="!implementOpt.hasData"></defaultBlock>

			<l-echart v-else class="line" ref="implementLineChart"></l-echart>
		</view>

		<tagSelect ref="tagSelect" @success="changeTags"></tagSelect>
	</cardTemplate>
</template>

<script>
import * as echarts from '@/subpages/components/lime-echart/static/echarts.min';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import cardTemplate from '../components/card-template/card-template.vue';
import totals from '../components/card-template/totals.vue';
import { setLineOptMore, setLineOpt, setRingOpt, onelineOpt } from './chartSet.js';
import { getLastDates } from '@/utils/tools.js';
import defaultBlock from '../components/default.vue';
import sTable from '../../components/s-table/s-table.vue';
import sPicker from '../../components/s-picker/s-picker.vue';
import sTabs from '../components/tabs.vue';
import tagSelect from './../components/tag-select.vue';

import {
	getWorkStatusGroupRecords,
	getWorkStatusUserRecords,
	getStatusDept,
	getStatusUser,
	getWorkStatusLines,
	getWorkStatusGroupLines,
	getWorkStatusUserLines,
	getStatusTableSingle,
} from '@/apis/statistic.js';
export default {
	name: 'workStatus',
	components: { LEchart, cardTemplate, totals, defaultBlock, sTable, sPicker, sTabs, tagSelect },
	props: {
		title: {
			type: [String],
			default: ''
		},
		groupId: [String, String],
		memberList: {
			type: Array,
			default: () => []
		},
		userList: {
			type: Array,
			default: () => []
		},
		pageScrollTop: {
			type: [Number, String],
			default: 0
		},
		childDeep: {
			type: [Number, String],
			default: 0
		},
		safeAreaBottom: {
			type: [Number, String],
			default: 0
		}
	},
	data() {
		return {

			loading: false, // 加载中
			cardSetting: {
				titleTips: {
					show: false,
					content: ''
				}
			},
			dateTypes: ['按日', '按周', '按月'],
			filter: {
				type: 1, // 统计类型 1数量，2趋势
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: '',
				useType: 0
			},
			// groupTotal:{},
			typeList: ['按组', '按人'],
			groupList: ['整体趋势', '趋势对比'],
			ringChart: {},
			implementOpt: {
				colors: ['#F47D99', '#6FA9FF', '#B59CFE', '#fbcb92', '#87e7b4'
				],
				count: 0,
				totals: {},
				// 保养作业时长配置
				hasData: false,
				typeIdx: 0, // 0按组 1按人
				dateType: 0,
				lineOpt: setLineOptMore({ tofix: 1 }),
				lineOptDef: setLineOpt({ tofix: 1 }, 'area', ['#F590A8', '#37E4EC', '#8D54EE', '#FBCB92', '#41CE78']),
				opts: {},
				type: 1, // 1按组统计，2按人统计
				lineType: 0, // 0整体趋势 1趋势对比
				tagIdx: 0,
				lineTypeGroup: [], // 选中的组
				lineTypeMbs: [], // 选中的人
				tags: [
					{ name: '待开始', unit: '单', key: 'toStart' },
					{ name: '进行中', key: 'underway', unit: '单' },
					{ name: '提交任务', key: 'commit', unit: '单' },
					{ name: '维保签字', key: 'maintainSignature', unit: '单' },
					{ name: '已完成', key: 'finished', unit: '单' }
				],
				userHead: [
					{
						name: '执行状态', // 表头名称
						sort: false, // 是否开启该列的排序功能
						width: 210, // 列宽
						checked: true,
						key: 'name', // 显示哪个字段
						unit: '' // 单位
					},
					{
						name: '数量',
						sort: false,
						checked: true,
						width: 220,
						key: 'num'
					},
					{
						name: '占比',
						sort: false,
						width: 235,
						checked: true,
						key: 'per',
						unit: '%'
					}
				],
				leaderHead: [
					{
						name: '组名', // 表头名称
						sort: false, // 是否开启该列的排序功能
						checked: true,
						width: 180, // 列宽
						key: 'name', // 显示哪个字段
						unit: '' // 单位
					},
					{
						name: '待开始',
						sort: true,
						checked: true,
						width: 188,
						key: 'toStart'
					},
					{
						name: '待开始/占比',
						sort: true,
						checked: true,
						width: 188,
						key: 'toStartPer',
						unit: '%'
					},
					{
						name: '进行中',
						sort: true,
						checked: true,
						width: 188,
						key: 'underway'
					},
					{
						name: '进行中/占比',
						sort: true,
						checked: true,
						width: 188,
						key: 'underwayPer',
						unit: '%'
					},
					{
						name: '提交任务',
						sort: true,
						checked: true,
						width: 188,
						key: 'commit'
					},
					{
						name: '提交任务/占比',
						sort: true,
						checked: true,
						width: 188,
						key: 'commitPer',
						unit: '%'
					},
					{
						name: '维保签字',
						sort: true,
						checked: true,
						width: 188,
						key: 'maintainSignature'
					},
					{
						name: '维保签字/占比',
						sort: true,
						checked: true,
						width: 188,
						key: 'maintainSignaturePer',
						unit: '%'
					},
					{
						name: '已完成',
						sort: true,
						checked: true,
						width: 188,
						key: 'finished'
					},
					{
						name: '已完成/占比',
						sort: true,
						checked: true,
						width: 188,
						key: 'finishedPer',
						unit: '%'
					}
				],
				linedata: {
					categories: [],
					series: []
				},
				chartData: {
					series: []
				},
				groupRecords: [], // 组明细
				userRecords: [] // 人明细
			}
		};
	},
	mounted() {
		const dates = getLastDates(7); // 默认近七天
		this.filter.startTime = dates.startTime;
		this.filter.endTime = dates.endTime;
	},
	methods: {
		setRingChart(chart) {  // 绘制环形图
			let list = this[chart].chartData.series;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				chartData.push({
					value: list[i].data, name: list[i].name
				});
			}
			this[chart].opts = setRingOpt({ color: this[chart].colors, data: chartData });
			this.$nextTick(() => {
				this.$refs[chart].init(echarts, chartF => {
					// this.chartMaps[chart] = chartF 
					chartF.setOption(this[chart].opts);

					chartF.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: 0
					});

					chartF.on('legendselectchanged', (e) => { 
						chartF.dispatchAction({ type: 'downplay', seriesIndex: 0 }); // 处理图例点击导致选中与默认选中重叠问题
					});

					chartF.on('mouseover', (e) => {
						if (e.dataIndex !== 0) { // 当鼠标移除的时候 使默认的索引值去除默认选中
							chartF.dispatchAction({ type: 'downplay', seriesIndex: 0 });
						}
					});
				});
			});
		},

		toMemberDetail(res, type) {
			this.toMaintenanceList({ key: type, value: [res.item.typeKey] });
		},
		// 表格点击事件
		toContractDetail(res, typdIdx) {
			const { item, key } = res; 
			if (key == 'name' && this.memberList.length) {
				if (!this.memberList.length) {
					return;
				}
				// 数据下转
				let list = [];
				let groupId = '';
				if (this.memberList.length == 1) {
					list = this.memberList[0].children;
					groupId = this.memberList[0].id;
				} else {
					list = this.memberList;
				}
				if (typdIdx == 1 && this.memberList.length > 1) {
					// 按人对比 查询子集维保员
					for (let i = 0; i < list.length; i++) {
						for (let j = 0; j < list[i].children.length; j++) {
							if (list[i].children[j].name == item.name) {
								const storage = {
									groupId: this.groupId,
									id: list[i].children[j].id,
									title: item.name
								};
								this.toDeepPage(storage);
								return;
							}
						}
					}
				} else { 
					for (let i = 0; i < list.length; i++) {
						if (list[i].name == item.name) {
							if (list[i].type == 2) {
								// 人单位
								const storage = {
									groupId: groupId,
									id: list[i].id,
									title: item.name
								};
								this.toDeepPage(storage);
							} else {
								// 组单位
								groupId = list[i].id;
								let ids = [];
								list[i].children.forEach(item => {
									ids.push(item.id);
								});
								const storage = {
									groupId: groupId,
									id: ids.join(','),
									groupList: [list[i]],
									title: item.name
								};
								this.toDeepPage(storage);
							}
							return;
						}
					}
				}
			}
		},
		// 数据下转
		toDeepPage(data) {
			console.log('数据下转', data);
			data.filter = this.filter;
			data.tabNums = this.tabNums;
			uni.setStorage({
				key: 'statistical' + (Number(this.childDeep || 0) + 1),
				data: data,
				success: res => {
					uni.navigateTo({
						url: `./statistical?tabIdx=2&childDeep=${Number(this.childDeep || 0) + 1}`
					});
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		showSPicker() {
			this.$emit('showSPicker', this.implementOpt);
		},
		// 修改某个图表日月周
		changeDateType(res) {
			// console.log('修改某个图表日月周', res);
			this['implementOpt'].dateType = res.value;
			this.getUserTrend();
		},
		showSPicker() {
			this.$emit('showSPicker', this.implementOpt);
		},
		// 自定义按组按人趋势对比
		changeMbsFuc(res) {
			console.log('自定义按组按人趋势对比', res);
			this['implementOpt'].type = res.type;
			if (res.type == 1) {
				this['implementOpt'].lineTypeGroup = JSON.parse(JSON.stringify(res.acts));
			}
			if (res.type == 2) {
				this['implementOpt'].lineTypeMbs = JSON.parse(JSON.stringify(res.acts));
			}
			this.getUserTrend();
		},
		// 打开对比名等
		changeMbs() {
			this.$emit('changeMbs', this.implementOpt);
		},
		// 修改筛选条件
		getFilterFun(res) {
			console.log('修改筛选条件-status', res, this.filter);
			if (res.applyToAll) {
				this.$emit('applyToAll', res);
			}
			this.filter = res;
			this.initData();
		},
		// 初始化数据
		initData(data) { 
			if (this.userList.length == 0) {
				return;
			}
			this.loading = true;
			if (data) {
				if (data.applyToAll) {
					this.filter.dateType = data.dateType;
					this.filter.startTime = data.startTime;
					this.filter.endTime = data.endTime;
				} else {
					this.filter = data;
				}
			}
			this.implementOpt.totals = {};
			if (this.memberList.length <= 1) {
				this.implementOpt.typeIdx = 1;
			}
			// 如果是数量
			if (this.filter.type == 1) {
				this.getStatusPieFun();
				if (this.userList.length > 1) {
					// 表格
					this.getGroupStatistic(this.filter); // 多人
				} else {
					this.getUserStatistic(); // 单人
				}
			} else {
				this.implementOpt.dateType = 0;
				this.implementOpt.lineType = 0;
				this.implementOpt.lineTypeGroup = [];
				this.implementOpt.lineTypeMbs = [];
				this.getUserTrend();
			}
		},
		// 获取饼图数据
		getStatusPieFun() {
			// debugger

			let params = {
				startDate: this.filter.startTime,
				endDate: this.filter.endTime,
				userIds: this.userList,
				useType: this.filter.useType == 2 ? '' : this.filter.useType
			};
			if (this.userList.length > 1) {
				getStatusDept(params)
					.then(res => {
						this.implementOpt.count = res.data.planTotal;
						this.implementOpt.chartData.series = [
							{ name: '待开始', data: Number(res.data.toStartPer) },
							{ name: '进行中', data: Number(res.data.underwayPer) },
							{ name: '提交任务', data: Number(res.data.commitPer) },
							{ name: '维保签字', data: Number(res.data.maintainSignaturePer) },
							{ name: '已完成', data: Number(res.data.finishedPer) }
						];
						if (this.implementOpt.count > 0) {
							this.setRingChart('implementOpt');
						}

						this.loading = false;
					})
					.catch(err => {
						this.loading = false;
					});
			} else {
				getStatusUser(params)
					.then(res => {
						this.implementOpt.count = res.data.planTotal;
						this.implementOpt.chartData.series = [
							{ name: '待开始', data: Number(res.data.toStartPer) },
							{ name: '进行中', data: Number(res.data.underwayPer) },
							{ name: '提交任务', data: Number(res.data.commitPer) },
							{ name: '维保签字', data: Number(res.data.maintainSignaturePer) },
							{ name: '已完成', data: Number(res.data.finishedPer) }
						];
						if (this.implementOpt.count > 0) {
							this.setRingChart('implementOpt');
						}
						this.loading = false;
					})
					.catch(err => {
						this.loading = false;
					});
			}
		},
		getGroupList() {
			let arr = [
				{
					deptId: -1,
					deptName: '全部',
					userIds: this.userList,
					startDate: this.filter.startTime,
					endDate: this.filter.endTime
				}
			];
			for (var i = 0; i < this.memberList.length; i++) {
				const item = {
					deptId: this.memberList[i].id,
					deptName: this.memberList[i].name,
					userIds: []
				};
				for (var j = 0; j < this.memberList[i].children.length; j++) {
					item.userIds.push(this.memberList[i].children[j].id);
				}
				arr.push(item);
			}
			return arr;
		},
		// 个人版表格
		getUserStatistic() {
			let params = {
				startDate: this.filter.startTime,
				endDate: this.filter.endTime,
				userIds: this.userList,
				useType: this.filter.useType == 2 ? '' : this.filter.useType
			};
			getStatusTableSingle(params).then(res => {
				const list = res.data; 
				for (var i = 0; i < list.length; i++) {
					list[i].name = list[i].label;
					this.setGeoupData(list, 'implementOpt');
					this.loading = false;
				}
			});
		},
		// 按组统计 types：年审类型 inits：初始加载全部 corr：加载对应数据
		getGroupStatistic(type, inits = 1, corr = 1) {
			if (type === 0 || type === 1) {
				// 年审类型
				obj.useType = type;
			}
			// 按组

			if (this.implementOpt.typeIdx == 0) {
				let arr = this.getGroupList();
				getWorkStatusGroupRecords({
					startDate: this.filter.startTime,
					endDate: this.filter.endTime,
					deptGroups: arr,
					useType: this.filter.useType == 2 ? '' : this.filter.useType,
				})
					.then((res) => {
						const list = res.data;
						for (var i = 0; i < list.length; i++) {
							list[i].name = list[i].label;
							// list[i].allTime = Number(list[i].byWorkTimeTotal || 0) + Number(list[i].wxWorkTimeTotal || 0) + Number(list[i].pjWorkTimeTotal || 0);
						}
						this.setGeoupData(list, 'implementOpt');
					 
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			} else {
				// 按人
				getWorkStatusUserRecords({
					startDate: this.filter.startTime,
					endDate: this.filter.endTime,
					userIds: this.userList,
					useType: this.filter.useType == 2 ? '' : this.filter.useType,
				})
					.then((res) => {
						const list = res.data; 
						for (var i = 0; i < list.length; i++) {
							list[i].name = list[i].label;
						}
						this.setGeoupData(list, 'implementOpt');
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			}
		},
		// 提取表格全部数据
		setGeoupData(arr, key) {
			let list = [];
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].name == '全部') {
					this[key].totals = arr[i];
				} else {
					let map = {
						待开始: 1,
						进行中: 2,
						提交任务: 3,
						已完成: 4,
						维保签字: 5,
					};

					arr[i].typeKey = map[arr[i].name];
					list.push(arr[i]);
				}
			}
			// 如果是组
			if (this.userList.length > 1) {
				if (this[key].typeIdx == 0) {
					this[key].groupRecords = list;
				} else {
					this[key].userRecords = list;
				}
			} else {
				// 如果是人
				this[key].userRecords = list;
			}
		},
		// 趋势统计 types：年审类型 inits：初始加载全部 corr：加载对应数据
		getUserTrend() {
			if (this.memberList.length) {
				// 组长或经理
				if (this.implementOpt.lineType == 0) {
					// 整体
					this.getWorkStatusLines();
				} else {
					// 趋势对比
					if (this.implementOpt.type == 1) {
						// 按组
						this.getWorkStatusGroupLines();
					} else {
						// 按人
						this.getWorkStatusUserLines();
					}
				}
			} else {
				// 个人
				this.getWorkStatusLines();
			}
		},
		// 切换趋势对比模式下的折线图类型
		changeLineTag(index) {
			console.log('切换趋势对比模式下的折线图类型', index);
			this.implementOpt.tagIdx = index;
			this.getUserTrend();
		},

		// 整体趋势
		getWorkStatusLines() {
			getWorkStatusLines({
				startDate: this.filter.startTime,
				endDate: this.filter.endTime,
				userIds: this.userList,
				useType: this.filter.useType == 2 ? '' : this.filter.useType,
				dataType: Number(this.implementOpt.dateType) + 1,
			}).then((res) => {
				console.log('保养-保养执行-趋势整体', res);
				this.setLineData(res.data);
				this.loading = false;
			});
		},

		// 趋势对比-按组
		getWorkStatusGroupLines() {
			let arr = [];
			for (var i = 0; i < this.memberList.length; i++) {
				const item = {
					deptId: this.memberList[i].id,
					deptName: this.memberList[i].name,
					userIds: [],
				};
				for (var j = 0; j < this.memberList[i].children.length; j++) {
					item.userIds.push(this.memberList[i].children[j].id);
				}
				if (this['implementOpt'].lineTypeGroup.indexOf(item.deptId) != -1) {
					arr.push(item);
				}
			}
			getWorkStatusGroupLines({
				startDate: this.filter.startTime,
				endDate: this.filter.endTime,
				deptGroups: arr,
				useType: this.filter.useType == 2 ? '' : this.filter.useType,
				dataType: Number(this.implementOpt.dateType) + 1,
				temp: this.implementOpt.tagIdx + 1,
			}).then((res) => {
				console.log('保养-作业时长-趋势对比-按组', res);
				this.setLineData(res.data, '单');
				this.loading = false;
			});
		},

		// 趋势对比-按人
		getWorkStatusUserLines() { 
			getWorkStatusUserLines({
				startDate: this.filter.startTime,
				endDate: this.filter.endTime,
				userIds: this.implementOpt.lineTypeMbs,
				useType: this.filter.useType == 2 ? '' : this.filter.useType,
				dataType: Number(this.implementOpt.dateType) + 1,
				temp: this.implementOpt.tagIdx + 1
			}).then(res => {
				console.log('保养-作业时长-趋势对比-按人', res);
				this.setLineData(res.data, '单');
				this.loading = false;
			});
		},
		// 截取日期前几位
		changeDateVal(list) {
			if (!list || list.length == 0) {
				return [];
			}
			let relist = [];
			for (let i = 0; i < list.length; i++) {
				let date = list[i];
				if (date.indexOf('月') != -1) {
					relist.push(date);
				} else {
					if (date.indexOf('~') != -1) {
						// 按周
						let arr = date.split('~');
						try {
							relist.push(arr[0].slice(5) + '~' + arr[1].slice(5));
						} catch (e) {
							// TODO handle the exception
							relist.push('');
						}
					} else {
						relist.push(date.slice(5));
					}
				}
			}
			return relist;
		},

		// 重组趋势数据结构
		setLineData(list, unit) {
			const key = 'implementOpt';
			const linedata = {
				categories: [],
				series: [],
			};
			if (list.length == 0) {
				this[key].hasData = false;
				return linedata;
			}

			linedata.categories = Object.keys(list[0].trendData);
			for (let i = 0; i < list.length; i++) {
				let item = {};
				if (unit) {
					item = {
						data: [],
						name: list[i].type,
						unit: unit
					};
				} else { 
					item = {
						data: [],
						// index: i,
						name: list[i].type,
						unit: this[key].tags[i].unit
					};
				}
				for (let j = 0; j < linedata.categories.length; j++) {
					item.data.push(list[i].trendData[linedata.categories[j]] * 1);
				}
				linedata.series.push(item);
			}
			// linedata.categories = this.changeDateVal(linedata.categories)
			this[key].linedata = linedata; 
			this[key].hasData = true;
			if (this[key].hasData) {
				this.setLineChart(key);
			}
		},

		// 绘制趋势折现图
		setLineChart(chart) {  // 绘制环形图
			let list = this[chart].linedata.series;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				let seriesItem = {
					name: list[i].name,
					type: 'line',
					showSymbol: list[i].data.length <= 1 ? true : false,

					// areaStyle: {},
					smooth: true,
					emphasis: {
						focus: 'none'
					},
					data: list[i].data
				};
				if (this[chart].lineType) {
					// 趋势对比 
					// seriesItem.emphasis = { focus: 'none'  }
				} else {
					// 整体
					seriesItem.areaStyle = { opacity: 0.2 };
					seriesItem.stack = 'Total';
					// seriesItem.emphasis = { focus: 'none'  }
				}

				chartData.push(seriesItem);
			}
			this[chart].lineOpts = onelineOpt({ unit: this[chart].tags[this[chart].tagIdx].unit || '', data: chartData, categories: this[chart].linedata.categories });
			this.$nextTick(() => {
				this.$refs['implementLineChart'].init(echarts, chartF => {
					// this.chartMaps[chart] = chartF 
					chartF.setOption(this[chart].lineOpts);
				});
			});
		},
		toMaintenanceList(res) {
			const { startTime, endTime, dateType } = this.filter;
			res.tabNums = [this.filter.useType];
			if (this.filter.useType === 2) {
				// 默认不传全部
				delete res.tabNums;
			}
			uni.navigateTo({
				url:
					'/subpages/maintenanceStatistics/index?data=' +
					JSON.stringify(startTime ? { ...res, startTime, endTime, dateType, childDeep: this.childDeep } : { ...res, childDeep: this.childDeep })
			});
		},
		formatterCenter(res) {
			// console.log(res);
			let { ratio, name } = res;
			// console.log('formatterCenter', ratio, name);
			if (name && name.indexOf('分钟') != -1) {
				let arr = name.split('(');
				name = arr[0];
			}
			return {
				title: res.data + '%',
				subtitle: name
			};
		},
		// 点击按组按人
		changeTab(key, idx) {
			console.log('按组按人');
			this[key].typeIdx = idx;
			this.getGroupStatistic(this.filter);
		},
		showKeysSelect(key) {
			this.$refs.tagSelect.init({
				tags: this[key].leaderHead,
				key: key
			});
		},
		// 自定义表格字段
		changeTags(res) {
			console.log('自定义表格字段', res);
			this[res.key].leaderHead = res.tags;
		},
		setDefGroup(key) {
			if (this[key].type == 1) {
				// 按组对比，设置默认组数据
				if (this[key].lineTypeGroup.length) {
					// 检查是否有已选数据
				} else {
					let groups = [];
					for (let i = 0; i < this.memberList.length; i++) {
						groups.push(this.memberList[i].id);
					}
					if (groups.length > 5) {
						groups = groups.slice(0, 5);
					}
					this[key].lineTypeGroup = groups;
				}
			} else {
				// 按人对比，设置人默认数据
				if (this[key].lineTypeMbs.length) {
					// 检查是否有已选数据
				} else {
					let mbs = JSON.parse(JSON.stringify(this.userList));
					if (mbs.length > 5) {
						mbs = mbs.slice(0, 5);
					}
					this[key].lineTypeMbs = mbs;
				}
			}
			console.log(this.timeOpt);
		},
		// 切换某个图表的整体趋势或趋势对比
		changeLineType(key, idx) {
			console.log('切换图表的整体趋势或趋势对比', key, idx);
			this[key].lineType = idx;
			if (idx == 0) {
				// 整体趋势
				this.getWorkStatusLines();
				// this.getUserTrend(key, this[key], nums,1,1);
			}
			if (idx == 1) {
				// 趋势对比
				// console.log('这里是趋势对比');
				if (this.memberList.length == 1) {
					// 如果没有下级组
					this[key].type = 2; // 只能按人对比
				}
				this.setDefGroup(key);
				this.getUserTrend();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import "./card.scss";
</style>
